
<!--<style>-->
<!--  html,-->
<!--  body {-->
<!--    width: 100%;-->
<!--    height: 100%;-->
<!--    display: flex;-->
<!--    display: -webkit-flex;-->
<!--    flex-direction: column;-->
<!--    -webkit-flex-direction: column;-->
<!--    margin: 0;-->
<!--    padding: 0;-->
<!--    font-family: "微软雅黑";-->
<!--    z-index: 1;-->
<!--  }-->


<!--  /*标题*/-->

<!--  header {-->
<!--    background-color: #18B4ED;-->
<!--    position: relative;-->
<!--    height: 4rem;-->
<!--  }-->

<!--  header h2 {-->
<!--    color: #fff;-->
<!--    text-align: center;-->
<!--    height: 4rem;-->
<!--    line-height: 3rem;-->
<!--    margin-top: 5px;-->
<!--    margin-bottom: 5px;-->
<!--  }-->


<!--  /*右上按钮*/-->

<!--  .nav-change {-->
<!--    background-color: #12B7F5;-->
<!--    border: 0;-->
<!--    color: #fff;-->
<!--    height: 2.5rem;-->
<!--    z-index: 2;-->
<!--    position: absolute;-->
<!--    right: 10px;-->
<!--    top: 10px;-->
<!--  }-->


<!--  /*主体*/-->

<!--  .container {-->
<!--    background-color: #F2F2F2;-->
<!--    flex: 1;-->
<!--  }-->


<!--  /*输入框*/-->

<!--  .search {-->
<!--    background-color: #F7F7F8;-->
<!--    display: flex;-->
<!--    display: -webkit-flex;-->
<!--    align-items: center;-->
<!--    height: 2.5rem;-->
<!--    padding: 0.5rem;-->
<!--  }-->

<!--  .search-input {-->
<!--    width: 100%;-->
<!--    border: 0;-->
<!--    height: 2rem;-->
<!--    padding-left: 1rem;-->
<!--  }-->

<!--  .search-btn {-->
<!--    background-color: #12B7F5;-->
<!--    color: #fff;-->
<!--    border: 0;-->
<!--    height: 2rem;-->
<!--    width: 3rem;-->
<!--    margin-left: 0.5rem;-->
<!--  }-->


<!--  /*主体部分*/-->

<!--  .main {-->
<!--    padding: 0 1rem 1rem 1rem;-->
<!--    flex-grow: 1;-->
<!--  }-->

<!--  .main_content p {-->
<!--    height: 2rem;-->
<!--    line-height: 2rem;-->
<!--  }-->

<!--  .main_title {-->
<!--    color: #777777;-->
<!--  }-->

<!--  .main_hint {-->
<!--    background-color: #FEDBDB;-->
<!--    height: 2.5rem;-->
<!--    line-height: 2.5rem;-->
<!--  }-->

<!--  .main_content {-->
<!--    height: 100%;-->
<!--  }-->


<!--  /*底部*/-->

<!--  footer {-->
<!--    background-color: #F2F2F2;-->
<!--    height: 2.5rem;-->
<!--  }-->


<!--  /*底部的大删除按钮*/-->

<!--  .btn_remove_bg {-->
<!--    display: none;-->
<!--    background-color: #FB6155;-->
<!--    color: #fff;-->
<!--    width: 100%;-->
<!--    height: 2.5rem;-->
<!--    border: 0;-->
<!--    border-radius: 5px 5px 0 0;-->
<!--  }-->


<!--  /*添加的小按钮*/-->

<!--  .btn_remove {-->
<!--    background-color: #FB6155;-->
<!--    color: #fff;-->
<!--    border: 0;-->
<!--    height: 2rem;-->
<!--    width: 3rem;-->
<!--    margin-left: 0.5rem;-->
<!--    float: right;-->
<!--  }-->


<!--  /*多选按钮*/-->

<!--  .checkbox {-->
<!--    zoom: 130%;-->
<!--  }-->

<!--  .hide {-->
<!--    display: none;-->
<!--  }-->

<!--  .show {-->
<!--    display: show;-->
<!--  }-->
<!--</style>-->

<!--<header>-->
<!--  <h2>我的待办事项</h2>-->
<!--  <button type="submit" class="nav-change show" onclick="change(true)" id="choice">多选</button>-->
<!--  <button type="submit" class="nav-change hide" onclick="change(false)" id="cancel">取消</button>-->
<!--</header>-->
<!--<div class="container">-->
<!--  <div class="search">-->
<!--    <input type="text" placeholder="请输入备注信息" class="search-input" id="input"/>-->
<!--    <button type="submit" class="search-btn" onclick="add()">添加</button>-->
<!--  </div>-->
<!--  <div class="main">-->
<!--    <h2 class="main_title">待办事项列表如下:</h2>-->
<!--    <div class="main_content" id="main_content">-->
<!--      <p class="main_hint">&nbsp;&nbsp;&nbsp;你当前还没有待办事项哦!</p>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<!--<footer>-->
<!--  <button class="btn_remove_bg" id="btn_remove_bg" onclick="remvoe_check()">删除</button>-->
<!--</footer>-->
<div><router-outlet></router-outlet></div>
